<template>
  <div class="agreemt-box">
    <el-row :gutter="20">
      <el-col :span="8" class="npd30">
        <NewCard title="帮助设置">
          <div class="helpBox">
            <h3>问题</h3>
            <el-collapse>
              <el-collapse-item
                :title="`${help.type} id：${help.typeId}`"
                :name="index"
                v-for="(help, index) in helpList"
                :key="index"
              >
                <ul>
                  <li
                    v-for="(con, i) in help.children"
                    :key="i"
                    @dblclick="dbHelpList(con.id)"
                    :class="con.id == currentEdit.id?'isActive':''"
                  >
                    <p v-if="dbInputId != con.id" @click="selectContent(con)">
                      {{ con.title }}
                    </p>
                    <el-input
                      v-model="con.title"
                      v-else
                      @blur="blurHelpList(index,i,con.title,con.no,help.type,help.typeId,con)"
                    ></el-input>
                  </li>
                </ul>
                <p class="addList">
                  <svg-icon
                    icon-class="add-icon"
                    @click="addHelpList(index, help.children.length)"
                  />
                </p>
              </el-collapse-item>
            </el-collapse>
            <div class="bottomBtn" v-hasPermi="['doc:helps:add']">
              <el-button @click="clickbBtn" v-if="bottomBtnShow"
                >+添加问题组</el-button>
              <!-- @blur="addIssueFn" -->
              <el-input
                v-model="bottomBtnValue"
                v-else
                @keyup.enter.native="addIssueFn"
                ref="bottBtn"
              >
              </el-input>
            </div>
          </div>
        </NewCard>
      </el-col>

      <el-col key="1" :span="16">
        <div class="contentMain">
          <NewCard :isright="true" :title="currentEdit.title?currentEdit.title:'编辑'">
            <WangEditor :wangkey="1" ref="wangEditor" :list="detailContent" :uploadimg="uploadimg">
            </WangEditor>
            <SubBtn>
              <template slot="btn">
                <el-button round @click="deleteFn" v-hasPermi="['doc:helps:remove']">删除</el-button>
                <el-button round @click="saveFn('isReset')">重置</el-button>
                <el-button type="primary" round @click="saveFn" v-hasPermi="['doc:helps:edit']">保存</el-button>
              </template>
            </SubBtn>
          </NewCard>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getHelpsListApi,
  getHelpsAddApi,
  getHelpsEditApi,
  getHelpsRemoveApi,
} from "@/wss/newApi_3-24/doc/helps.js";
import {helpType} from "@/wss/utils/wss.js"

import NewCard from "../../../components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";
const arr = [null, undefined, ""];
// 协议类型
// import { agreementArr } from "@/wss/utils/wss.js";
import ComSidebar from "../../../components/ComSidebar.vue";
import WangEditor from "../../../components/wangEditor.vue";
import ComGetLaw from "../../../components/ComGetLaw.vue";
export default {
  components: { NewCard, ComSidebar, WangEditor, ComGetLaw, SubBtn },

  data() {
    return {
      // 帮助内容
      detailContent: [],

      dbInputId: "", // 当前双击的id
      // 问题列表
      helpList: [],
      currentEdit: { content: "" },
      bottomBtnShow: true, //底部按钮
      bottomBtnValue: "", //底部输入值

      helpTitleList:[],//问题组名列表

      uploadimg: '/doc/overall/uploadCustomFolder/helps',//上传图片的接口
    };
  },
  created() {
    this.getHelpsListFn();
  },
  methods: {
    // 删除
    async deleteFn() {
      if (arr.includes(this.currentEdit.id)) {
        this.$message({
          type: "warning",
          message: "请选择删除的某一项",
        });
        return;
      }
      let { code, msg } = await getHelpsRemoveApi(this.currentEdit.id);
      if (code != 200) return;

      this.$message({
        type: "success",
        message: msg,
      });
      this.currentEdit = { content: "" };
      this.getHelpsListFn();
    },

    // 重设与保存函数
    async saveFn(isReset) {
      let exitArr = ["", undefined, null];
      const currentEdit = this.currentEdit;
      // 如果没选择直接退出
      if (exitArr.includes(currentEdit.id)) {
        this.$message({
          type: "warning",
          message: "请选择编辑的一项",
        });
        return;
      }
      // 是否是重新设置
      if (isReset == "isReset") {
        this.$refs.wangEditor.setEditorDataFn("");
        currentEdit.content = "";
      }

      currentEdit.content = this.$refs.wangEditor.getEditorDataFn();

      let { code, msg } = await getHelpsEditApi(currentEdit);
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg,
      });
    },

    // 添加问题组
    async addIssueFn() {
      let exitArr = ["", undefined, null];
      const _this = this;
      let bottomBtnValue = _this.bottomBtnValue;
      // 问题不能为空
      if (exitArr.includes(bottomBtnValue)) {
        _this.bottomBtnValue = "";
        _this.bottomBtnShow = true;
        this.$message({ type: "warning", message: "请输入名称" });
        return;
      }
      // 问题组不能相同
      if(_this.helpTitleList.includes(bottomBtnValue)){
        _this.bottomBtnValue = "";
        _this.bottomBtnShow = true;
        this.$message({ type: "warning", message: "问题组不能相同" });
        return;
      }

      // 添加一个问题组
      const obj = {
        children: [],
        type: bottomBtnValue,
        typeId: this.getUniqueID(),
        title: bottomBtnValue,
      };
      _this.helpList.push(obj)
      _this.bottomBtnValue = "";
      _this.bottomBtnShow = true;

      return
      let { code, msg } = await getHelpsAddApi(obj);
      if (code != 200) return;
      _this.bottomBtnValue = "";
      _this.bottomBtnShow = true;
      _this.getHelpsListFn();
      _this.$message({
        type: "success",
        message: msg,
      });
    },

    // 生成唯一值 用在typeId
    getUniqueID(){
      // 当前时间转成 36 进制字符串
      var time = Date.now().toString(36)
      // 当前随机数转成 36 进制字符串
      var random = Math.random().toString(36)
      // 去除随机数的 0. 字符串
      random = random.substring(2, random.length)
      // 返回唯一ID
      return random + time
    },
    
    // 选择帮助详细
    selectContent(item) {
      this.currentEdit = item;
      this.detailContent = [item.content || ""];
    },

    // 获取帮组内容列表
    async getHelpsListFn() {
      this.helpList = [];
      let { code, data } = await getHelpsListApi();
      if (code != 200) return;
      const row = JSON.parse(JSON.stringify(data.rows));
      // 转换成树状结构
      this.helpList = helpType(row)

      // 获取所有问题组名
      this.helpList.forEach(item=>{
        this.helpTitleList.push(item.type)
      })
    },
    selectActive(row) {
      console.log(row);
    },

    //双击问题
    dbHelpList(id) {
      this.dbInputId = id;
    },

    //编辑框失去焦点
    blurHelpList(index, i, title, no, type, typeId, item) {
      this.dbInputId = "";

      if (title == "") {
        this.$message({
          type: "warning",
          message: "标题不能为空",
        });
        return;
      }

      // no 用于判断是否是新增
      if (!arr.includes(no)) {
        this.editHelps(item);
      } else {
        this.addHelps(i, title, type, typeId);
      }
    },

    // 新增帮助组里面的每一项
    async addHelps(i, title, type, typeId) {
      const obj = {
        content: "",
        type: type,
        typeId: typeId,
        title: title,
        no: i,
        id: "",
      };

      let { code, msg } = await getHelpsAddApi(obj);
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg,
      });
      this.getHelpsListFn() //重新获取列表
    },

    // 编辑帮助组里面的每一项
    async editHelps(item) {
      let { code, msg } = await getHelpsEditApi(item);
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg,
      });
      this.getHelpsListFn() //重新获取列表
    },
    
    // 添加一条数据
    addHelpList(index, length) {
      this.dbInputId = length;
      this.helpList[index].children.push({
        id: length,
        title: "",
      });
    },

    // 点击添加材料
    clickbBtn() {
      //显示输入框
      this.bottomBtnShow = false;
      //输入框自动获取焦点
      this.$nextTick(() => {
        this.$refs.bottBtn.focus();
      });
    },

    //输入框按回车的回调
    addMaterials() {
      if (this.bottomBtnValue) {
        //隐藏输入框
        this.bottomBtnShow = true;
        // this.bottomBtnValue
        this.helpList.push({
          id: "",
          title: this.bottomBtnValue,
          content: [],
        });
        this.bottomBtnValue = "";
      } else {
        this.$message({ type: "warning", message: "请输入名称" });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
h3,
p,
ul,
li,
i {
  margin: 0;
  padding: 0;
}

.agreemt-box {
  height: calc(100% - 60px);
  // flex-grow: 1;

  .contentMain {
    flex: 1;
    height: 100%;
    width: 100%;
  }
  .el-row {
    height: 100%;
    margin-bottom: 0;
    .el-col {
      height: 100%;
    }
  }
}
::v-deep .contentMain .top{
  flex-wrap: wrap;
}
::v-deep .contentMain .top .left{
  width: 100%;
  flex: auto;
}
::v-deep .el-col > div {
  height: 100%;
}
::v-deep .el-card__body {
  padding-bottom: 0px;
}

::v-deep .w-e-text > * {
  width: 100%;
}
::v-deep .el-card {
  position: relative;
  height: 100%;
  width: 100%;
}
::v-deep #wangEditor-1 {
  height: 100%;
}
::v-deep .el-card__body {
  height: 100%;
}
::v-deep .el-card__body > div {
  width: 100%;
  height: calc(100% - 45px);
  overflow-y: auto;
}

::v-deep .contentMain .el-card__body > div{
  height: calc(100% - 95px);
}

::v-deep .el-card__body > div::-webkit-scrollbar {
  width: 0;
}
::v-deep .el-card__body > div #div1 {
  height: 100%;
}
::v-deep .el-card__body > div #div1 .w-e-toolbar{
  z-index: 2001 !important;
}
::v-deep .el-card__body > div #div1 .w-e-text-container {
  height: 80% !important;
  z-index: 2000 !important;
}
::v-deep .w-e-text-container {
  // border: unset !important;
}

::v-deep .npd30 .el-card__body {
  padding: 0;
}
::v-deep .npd30 .el-card__body > .top {
  margin: 0 30px;
}

// 左侧样式
.helpBox {
  padding: 0 30px;
  margin-bottom: 80px;
}
.helpBox h3 {
  font-size: 12px;
  font-weight: 600;
  color: #909aaa;
  margin-bottom: 15px;
  margin-top: 15px;
}
::v-deep .helpBox .el-collapse-item__header,
::v-deep .helpBox .el-collapse-item__header.focusing {
  font-size: 14px;
  font-weight: 600;
  color: #2e3f5e;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}
::v-deep .helpBox .el-collapse-item__content {
  padding-bottom: 0;
}
::v-deep .helpBox .el-icon-arrow-right:before {
  content: "\E790";
}
::v-deep .helpBox .el-collapse-item__arrow.is-active {
  transform: rotate(180deg);
}

.helpBox ul > li {
  font-size: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
  color: #2e3f5e;
}
.helpBox ul > li.isActive,
.helpBox ul > li:hover{
  background-color: #f4f5f8;
}

.helpBox .addList {
  padding: 15px 0;
}
.helpBox .addList svg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #909aaa;
  cursor: pointer;
}
// 左侧样式 end

// 添加按钮
.bottomBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.bottomBtn .el-button {
  width: 100%;
  border: 0;
  border-top: 1px solid #ecedf0;
  background-color: #f8f8f8;
  line-height: 25px;
  color: #606e84;
}
.bottomBtn .el-input {
  width: 100%;
}
::v-deep .bottomBtn .el-input .el-input__inner {
  height: 46px;
  line-height: 46px;
  border: 0;
  border-top: 1px solid #ecedf0;
  background-color: #f8f8f8;
  text-align: center;
}
// 添加按钮end

/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px !important;
  z-index: 2000 !important;
}
::v-deep .subBtn > .el-button {
  width: 100px;
  padding: 8px 0 !important;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn > .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
</style>